<template>
    <div id="app">
        <User class="user" />
        <div class="title" v-if="this.$router.history.current.fullPath!=='/'">
            <div class="search">
                <Inputs @change="change" />
            </div>
        </div>
        <hr v-if="this.$router.history.current.fullPath!=='/'" />
        <router-view />
    </div>
</template>

<script>
import { mapGetters, mapMutations } from "vuex";
import User from '@/components/User'
import Inputs from '@/components/Inputs.vue'
import Utils from '@/utils/utils.js';  
export default {
  name: "App",
  components:{
    User,
    Inputs
  },
  created() {
    console.log(this.$router.history.current.fullPath);
  },
  computed: {
    // 使用对象展开运算符将 getter 混入 computed 对象中
    ...mapGetters(["getValue", "getLogin"]),
    value: {
      get() {
        return this.getValue;
      },
      set(value) {
        console.log("value", value);
        this.setValue(value);
        // 这里可以发起请求
        // this.resetBasic() // 这里的操作为对vuex中的action的调用
      },
    },
  },
  methods: {
    ...mapMutations(["setValue", "setLogin"]),
    handClick(value) {
      if (value === "push") {
        this.$router.push({ path: "/MyCollection" });
      } else {
        this.setLogin(null);
      }
    },
    change(res) { 

      Utils.$emit('demo',res);
    }
  },
};
</script>

<style >
/* @font-face {
  font-family: "iconfont logo";
  src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834');
  src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834#iefix') format('embedded-opentype'),
    url('https://at.alicdn.com/t/font_985780_km7mi63cihi.woff?t=1545807318834') format('woff'),
    url('https://at.alicdn.com/t/font_985780_km7mi63cihi.ttf?t=1545807318834') format('truetype'),
    url('https://at.alicdn.com/t/font_985780_km7mi63cihi.svg?t=1545807318834#iconfont') format('svg');
} */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
html,
body {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.title {
    display: flex;
    align-items: center;
    height: 120px;
}
.search {
    width: 50%;
    margin: 0 auto;
}
.user {
    text-align: right;
    margin-top: 40px;
    margin-right: 82px;
}
#app {
    font-family: "Avenir", Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.login {
    width: 50px;
    height: 30px;
    text-align: center;
    line-height: 30px;
    background: #2b79fe;
    color: #fff;
    border-radius: 10px;
    margin-right: 10px;
}
</style>
